<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <h1>{{ msg }}</h1>

    <!--scope 单词有作用域的意思-->
    <!--slope-slot 已经废弃-->

    <i-msg>
        <template v-slot:default="{ number, title }">
            中间是否可以存放内容？-{{ number }} - {{ title }}
        </template>
    </i-msg>

</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">

    /*需求：系统可以把组件内部的数据同规格 slot 传递出去*/
    Vue.component('i-msg', {
        data() {
            return {
                n: 10,
            }
        },
        template: `
            <div>
            <h2>我是消息组件</h2>
            <slot name="default" :number="n" title="我是消息组件"></slot>

</div>
        `
    });


    new Vue({
        el: '#app',
        data: {
            msg: '插槽'
        }
    })

</script>

</html>
